<template>
	<div class="return" v-if="orderInfo">
		<van-form @submit="onSubmit">
			<van-field v-model="orderInfo.code" readonly label="订单号" @click="showPicker = true" />
			<div class="space"></div>
			<!-- 收货地址 -->
			<van-cell v-if="!activeAddress" title="点击选择发货地址" is-link @click="onSelect" />
			<van-col v-else @click="onSelect" class="address">
				<van-row align="center">
					<span class="name">{{ activeAddress.consignee }}</span>
					<span class="mobile">{{ activeAddress.mobile }}</span>
				</van-row>
				<van-row class="detail">{{ activeAddress.region_text + ' ' + activeAddress.address }}</van-row>
			</van-col>

			<van-field
				v-model="expressText"
				is-link
				readonly
				label="快递公司"
				placeholder="点击选择快递公司"
				:rules="[{ required: true, message: '请选择快递公司' }]"
				@click="showPicker = true" />
			<van-field
				v-model="code"
				label="快递单号"
				placeholder="请输入快递单号"
				:rules="[{ required: true, message: '请输入快递单号' }]" />

			<van-field
				v-model="refundreason"
				rows="2"
				autosize
				label="退货原因"
				type="textarea"
				maxlength="200"
				placeholder="请输入退货原因"
				show-word-limit />

			<div style="margin: 16px">
				<van-button round block type="primary" native-type="submit"> 提交 </van-button>
			</div>
		</van-form>

		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>
		<!-- 地址选择 -->
		<van-popup v-model:show="showSelectAddress" position="bottom" class="popup" :style="{ height: '70%' }">
			<van-address-list
				v-model="chosenAddressId"
				:show-add-button="false"
				:list="addressList"
				:switchable="false"
				default-tag-text="默认"
				@click-item="onSelected" />
		</van-popup>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$cookies.get('business');
const orderid = ref(proxy.$route.query.orderid);

const showPicker = ref(false);
const columns = computed(() => {
	if (expressCompanyInfo.value) {
		return Object.keys(expressCompanyInfo.value).map((k) => {
			return { text: expressCompanyInfo.value[k], value: k };
		});
	} else {
		return [];
	}
});

const orderInfo = ref(null);
const expressCompanyInfo = ref(null);

const expressText = ref(''); // 快递公司
const expressID = ref(null); // 快递公司id
const code = ref(''); // 快递单号
const addressData = ref([]);
const activeAddress = ref(null); // 选择的收货地址
const addressList = ref([]);
const showSelectAddress = ref(false);
const chosenAddressId = ref(null);
const refundreason = ref('') // 退货原因

const getData = async () => {
	const res = await proxy.$GET({
		url: '/order/info',
		params: { busid: business.id, orderid: orderid.value },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	orderInfo.value = res.data;
};

// 获取物流公司信息
const getExpressCompany = async () => {
	const res = await proxy.$GET({
		url: '/order/expresscompany',
		params: { busid: business.id, orderid: orderid.value },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	expressCompanyInfo.value = res.data;
};

const onConfirm = ({ selectedOptions }) => {
	showPicker.value = false;
	expressText.value = selectedOptions[0].text;
	expressID.value = selectedOptions[0].value;
};

// 获取收获地址数据
async function getAddressData() {
	const res = await proxy.$POST({
		url: '/address/index',
		params: { busid: business.id },
	});
	console.log(res);
	if (res.code === 0) {
		proxy.$message(res.msg);
		return;
	}

	addressData.value = res.data;

	// // 找出默认的
	// for (const item of res.data) {
	// 	if (Number(item.status) === 1) {
	// 		activeAddress.value = item;
	// 		break;
	// 	}
	// }

	addressList.value = res.data.map((t) => {
		return {
			...t,
			// 是否默认地址
			isDefault: t.status === '1',
			name: t.consignee,
			tel: t.mobile,
			address: t.region_text + t.address,
		};
	});
}

const onSelect = () => (showSelectAddress.value = true);

const onSelected = (item) => {
	activeAddress.value = item;
	showSelectAddress.value = false;
};

const onSubmit = async () => {
	if (!activeAddress.value) {
		proxy.$message('请选择发货地址');
		return;
	}

	const data = {
		orderid: orderid.value,
		expid: expressID.value,
		code: code.value,
		addressid: activeAddress.value.id,
		busid: business.id,
		refundreason: refundreason.value
	};

	const res = await proxy.$POST({
		url: '/order/return',
		params: data,
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	proxy.$message(res.msg);

	setTimeout(() => {
		proxy.$router.back();
	}, 1000);
};

getData();
getExpressCompany();
getAddressData();
</script>

<style scoped lang="scss">
.return {
	margin: 5px;
	background-color: #fff;
	border-radius: 6px;
	overflow: hidden;
	padding: 10px;
}

.address {
	background-color: #fff;
	padding: 10px 15px;
	.name,
	.mobile {
		font-size: 15px;
	}
	.name {
		margin-right: 15px;
	}
	.detail {
		font-size: 13px;
		color: #999;
		margin-top: 4px;
	}
}
</style>
